import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 高光贴图
 *    MeshPhongMaterial具有 .specular 高光属性
 * 但一个模型往往不可能所有区域的高光程度都相同，不可能直接使用 .specural 属性来表示
 * 此时就可以借助 .specularMap 来设置高光贴图表示。
 * 高光贴图通过 RGB 值来描述不同各区域镜面反射的能力，
 * 与 .map 一样，通过 UV[0] 坐标映射到模型上的
 */
const sphereGeo = new THREE.SphereGeometry(100, 50, 50);
const txrl = new THREE.TextureLoader();
const txr =  txrl.load('../../textures/earth_atmos_2048.jpg');
const phongTxr = txrl.load('../../textures/earth_specular_2048.jpg');
const sphereMat = new THREE.MeshPhongMaterial({
  map: txr
});
const sphere = new THREE.Mesh(sphereGeo, sphereMat);
sphere.translateX(-100);
scene.add(sphere);
const spherePhongMat = new THREE.MeshPhongMaterial({
  map: txr,
  specularMap: phongTxr,
  shininess: 30 // 高光度
});
const spherePhong = new THREE.Mesh(sphereGeo, spherePhongMat);
spherePhong.translateX(100);
scene.add(spherePhong);

// 平行光
const directionalL = new THREE.DirectionalLight(0xffffff, 1);
scene.add(directionalL);
directionalL.position.set(60, 100, 40);
directionalL.target = spherePhong;

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 100,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();